<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true">
        <!-- <el-form-item>
          <el-select v-model="listQuery.status" class="w200"
            collapse-tags clearable @change="selectChange"
            placeholder="请选择状态">
            <el-option v-for="item in statusOptions"
              :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-input placeholder="请输入要查找的分支机构名称" clearable
            v-model="listQuery.key" class="w300"></el-input>
        </el-form-item>
        <el-button type="primary" @click="fetchList"
          :loading="listLoading" style="width: 100px;">
          查询
        </el-button>
        <el-button type="success" style="width: 150px;"
          @click="drawer = true;formData = {}">新增分支机构</el-button>
      </el-form>

      <el-table style="min-height: 200px;"
        v-loading="listLoading"
        :data="list"
        element-loading-text="数据加载中"
        border
        stripe
        fit
        highlight-current-row
        class="table"
        ref="multipleTable"
        >
        <el-table-column label="名称" align="center" prop="name" min-width="150"/>
        <el-table-column label="类型" align="center" prop="name" min-width="150">
          <template slot-scope="scope">
            {{scope.row.type.split(":")[1]}}
          </template>
        </el-table-column>
        <!-- <el-table-column label="简介" align="center" prop="info" min-width="200">
          <template slot-scope="scope">
            <el-tooltip placement="right" effect="light">
              <div slot="content" style="width: 200px;">
                {{scope.row.info}}
              </div>
              <div>
                <span>{{scope.row.info.substring(0,18)}}</span>
                <span v-if="scope.row.info && scope.row.info.length > 18">...</span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <el-table-column label="联系方式" align="center" prop="contact" min-width="200">
          <template slot-scope="scope">
            {{scope.row.contactName}}（{{scope.row.phone}}）
          </template>
        </el-table-column>
        <!-- <el-table-column label="新增时间" align="center" width="200" prop="createdTime" /> -->
        <el-table-column label="操作" align="right"
          class-name="small-padding fixed-width" min-width="200">
          <template slot-scope="scope">
            <el-button-group>
              <el-button size="mini" type="info"
                @click="drawer2=true;detailData = scope.row">详细</el-button>
              <el-button size="mini" type="info"
                @click="aboutPerson(scope.row)">负责人管理</el-button>
              <el-button size="mini" type="warning"
                @click="update(scope.row)">修改</el-button>
              <el-popconfirm title="确定删除该文章？"
                @confirm="deleteById(scope.row.id)">
                <el-button slot="reference" size="mini" type="danger">删除</el-button>
              </el-popconfirm>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: center;"
        v-show="total>0"
        :total="total"
        :current-page.sync="listQuery.page"
        :page-size.sync="listQuery.size"
        layout="sizes,prev,slot,next,jumper"
        prev-text="上一页"
        next-text="下一页"
        @size-change="fetchList"
        @current-change="fetchList"
      >
        <span>{{listQuery.page}}/{{ Math.trunc((total+ listQuery.size-1) / listQuery.size)}}</span>
      </el-pagination>
    </div>

    <el-drawer
      title="分支机构"
      size="40%"
      :visible.sync="drawer"
      direction="rtl"
      :destroy-on-close="true"
      :before-close="handleClose">
      <el-form inline style="padding: 0 40px 120px 25px;"
        class="overflowAuto"
        :model="formData" :rules="rules" ref="saveForm" label-width="100px" >
         <el-form-item label="名称" prop="name">
            <el-input placeholder="请输入名称" v-model="formData.name"
              class="w300"></el-input>
         </el-form-item>
         <el-form-item label="类型">
           <el-select v-model="formData.type" class="w300"
             clearable placeholder="请选择类型">
             <el-option v-for="item in typeOptions"
               :key="item.value" :label="item.label" :value="item.value"/>
           </el-select>
         </el-form-item>

         <el-form-item label="资质" prop="cert">
            <el-input placeholder="请输入资质" v-model="formData.cert"
              class="w300"></el-input>
         </el-form-item>
         <el-form-item label="地址" prop="address">
            <el-input placeholder="请输入地址" v-model="formData.address"
              class="w300"></el-input>
         </el-form-item>
         <el-form-item label="联系人" prop="contactName">
            <el-input placeholder="请输入联系人姓名" v-model="formData.contactName"
              class="w300"></el-input>
         </el-form-item>

         <el-form-item label="联系电话" prop="phone">
            <el-input placeholder="请输入联系电话" v-model="formData.phone"
              class="w300"></el-input>
         </el-form-item>
         <el-form-item label="电子邮件" prop="email">
            <el-input placeholder="请输入电子邮件" v-model="formData.email"
              class="w300"></el-input>
         </el-form-item>
         <el-form-item label="网站地址" prop="website">
            <el-input placeholder="请输入网站地址" v-model="formData.website"
              class="w300"></el-input>
         </el-form-item>
         <el-form-item label="简介" prop="info">
            <el-input placeholder="请输入分支机构简介"
              type="textarea" :rows="6"
              v-model="formData.info" class="w300"></el-input>
         </el-form-item>
         <el-form-item>
            <el-button type="primary"
              style="width: 150px;"
              @click="save">
              保存信息
            </el-button>
         </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer
      size="100%"
      :visible.sync="editDrawer"
      direction="rtl"
      :destroy-on-close="true"
      :before-close="handleClose">
      <template slot="title">
        <div>
          <el-button type="primary" @click="save"
            style="margin-right: 30px;width: 100px;"
            :loading="subing">
            保存
          </el-button>
          <span>{{formData.title}}</span>
        </div>
      </template>
      <div style="padding: 0 40px 120px 25px;" class="overflowAuto">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="formData.content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
      </div>
    </el-drawer>

    <el-drawer
      custom-class="detail-drawer"
      title="文章预览"
      size="100%"
      @opened="opened"
      :visible.sync="drawer3"
      direction="rtl">
      <div id="articleView"
        style="width: 800px;margin-left: auto;margin-right: auto;"></div>
    </el-drawer>
    <el-drawer
      custom-class="detail-drawer"
      title="详细"
      size="40%"
      :visible.sync="drawer2"
      direction="rtl">
      <el-descriptions :column="1" :border="true" label-class-name="descr-label">
        <el-descriptions-item label="名称">{{detailData.name}}</el-descriptions-item>
        <el-descriptions-item label="类型">
          <template v-if="detailData.type">{{detailData.type.split(":")[1]}}</template>
        </el-descriptions-item>
        <el-descriptions-item label="资质">{{detailData.cert}}</el-descriptions-item>
        <el-descriptions-item label="地址">{{detailData.address}}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{detailData.contactName}}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{detailData.phone}}</el-descriptions-item>
        <el-descriptions-item label="电子邮件">{{detailData.email}}</el-descriptions-item>
        <el-descriptions-item label="网站地址">{{detailData.website}}</el-descriptions-item>
        <el-descriptions-item label="简介">{{detailData.info}}</el-descriptions-item>
      </el-descriptions>
    </el-drawer>

  </div>
</template>

<script>
import branch from '@/mixins/branch.js'
import v from '@/utils/formValidate'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  components: { Editor, Toolbar },
  mixins: [branch],
  props: ['layout'],
  data() {
    return {
      rules: {
        name: [
          { max: 20, message: '长度不超过 20 个字符', trigger: 'change' },
          { required: true, message: '请输入分支机构名称', trigger: 'change' },
          { validator: v.validate({ blank: true }), trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'change' },
        ],
        cert: [
          { max: 64, message: '长度不超过 64 个字符', trigger: 'change' },
        ],
        address: [
          { max: 128, message: '长度不超过 128 个字符', trigger: 'change' },
        ],
        contactName: [
          { max: 32, message: '长度不超过 32 个字符', trigger: 'change' },
          { required: true, message: '请输入联系人姓名', trigger: 'change' },
          { validator: v.validate({ blank: true }), trigger: 'change' }
        ],
        phone:[
          { max: 32, message: '长度不超过 32 个字符', trigger: 'change' },
          { required: true, message: '请输入联系电话', trigger: 'change' },
          { validator: v.validate({ blank: true }), trigger: 'change' }
        ],
        email: [
          { max: 32, message: '长度不超过 32 个字符', trigger: 'change' },
        ],
        website:[
          { max: 64, message: '长度不超过 64 个字符', trigger: 'change' },
        ],
        info: [
          { max: 500, message: '长度不超过 500 个字符', trigger: 'change' },
        ],
      },
    }
  },
  methods: {
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped >
  @import "~@/styles/init.scss";
</style>
<style>
  .detail-drawer {
    padding-bottom: 10px;
  }
  .el-descriptions__body .el-descriptions__table .descr-label {
    width: 120px;
    text-align: right;
  }
  .el-table thead {
    color: #303133 !important;
  }
</style>
